<template>
	<view :class="themeName">
		<u-popup v-model="showPop" mode="bottom" border-radius="14" :safe-area-inset-bottom="true"
			:maskCloseAble="false">
			<view class="popup-content">
				<view class="popup-header">
					<!-- <image class="logo" mode="aspectFit" :src="logo"></image> -->
					<text class="title">{{ title }}</text>
				</view>
				<view class="popup-tips">
					建议使用您的微信头像和昵称，以便获得更好的体验
				</view>
				<view class="popup-form">
					<form @submit="handleSubmit">
						<u-form-item required label="头像" :labelWidth="120">
							<button class="select-avatar" hover-class="none" open-type="chooseAvatar"
								@chooseavatar="onChooseAvatar">
								<image class="avatar" :src="avatar" v-if="avatar" />
								<div class="select-btn" v-else>
									<u-icon name="plus" :size="30" />
									添加图片
								</div>
							</button>
						</u-form-item>
						<u-form-item required label="昵称" :labelWidth="120">
							<input style="height: 60rpx;text-align: left;" name="nickname" type="nickname"
								placeholder="请输入昵称" v-model="nickname" @input="changeInput"/>
						</u-form-item>
						<!-- <u-form-item required label="昵称" :labelWidth="120">
						    <input
						        style="height: 60rpx;text-align: left;"
						        name="nickname"
						        type="nickname"
						        placeholder="请输入昵称"
						    />
						</u-form-item> -->
						<button class="submit-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
							授权电话
						</button>
						<!-- 	<button class="submit-btn" form-type="submit">
							确定
						</button> -->
						<view class="close-btn" @tap="onClose">暂不登录</view>
					</form>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		uploadFile
	} from "@/utils/tools";
	export default {
		name: "mplogin-popup",
		props: {
			logo: {
				type: String,
				required: true
			},
			value: {
				type: Boolean,
				required: true
			},
			title: {
				type: String,
				required: true
			},
			loginData: {
				type: Object,
				default: () => ({})
			}
		},
		data() {
			return {
				avatar: "",
				nickname: '',
				mobile: '',
				register_source: 0,
				code: 0
			};
		},
		methods: {
			getPhoneNumber(e) { //授权电话
				console.log(e.detail.code);
				this.$request.post('shopapi/user/getUserPhone', {
					code: e.detail.code
				}).then(res => {
					console.log(res);
					this.mobile = res.data.data.phone;
					console.log(this.mobile)
					// this.$toast({
					// 	title: '电话授权成功'
					// })
					if (uni.getStorageSync('store_scene')) {
						this.register_source = JSON.parse(uni.getStorageSync('store_scene')).value;
					}
					if (uni.getStorageSync('store_invite_code')) {
						this.code = JSON.parse(uni.getStorageSync('store_invite_code')).value;
					}
					//这里就提交
					this.handleSubmit();
					console.log("更新1");
					// this.$request.post('shopapi/login/updateUser', {
					// 	avatar: this.avatar,
					// 	nickname: this.nickname,
					// 	mobile: this.mobile,
					// 	register_source: this.register_source,
					// 	code: this.code,
					// }).then(res => {

					// })
				})
			},
			onChooseAvatar(e) {
				const avatarUrl = e.detail.avatarUrl;
				if (!avatarUrl) {
					return;
				}
				uni.showLoading({
					title: "正在上传中...",
					mask: true,
				});
				uploadFile(avatarUrl, {
						header: {
							token: this.loginData.token
						}
					})
					.then((res) => {
						uni.hideLoading();
						this.avatar = res.uri;
					})
					.catch(() => {
						uni.hideLoading();
						this.$toast({
							title: "上传失败",
						});
					});
			},
			changeInput(e){
				console.log('Input value changed:', this.nickname);
			},
			handleSubmit() {
				// console.log(e.detail.value);
				// console.log(this.nickname);
				// const {
				// 	nickname
				// } = e.detail.value
				// console.log("更新21");
				// return;
				const {
					nickname,
					avatar,
					mobile,
					register_source,
					code
				} = this
				console.log(this.register_source);
				console.log("昵称" + this.name);
				console.log("头像" + this.avatar);
				console.log("电话" + this.mobile);
				if (!avatar) return this.$toast({
					title: '请添加头像'
				})
				if (!nickname) return this.$toast({
					title: '请输入昵称'
				})
				if (!mobile) return this.$toast({
					title: '请授权电话'
				})
				console.log("更新22");
				this.$emit('update', {
					avatar,
					nickname,
					mobile,
					register_source,
					code
				})
				console.log("更新23");
			},
			onClose() {
				this.showPop = false
				this.$emit('close')
			}
		},
		computed: {
			showPop: {
				get() {
					return this.value
				},
				set(val) {
					this.$emit('input', val)
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.popup-content {
		padding: 40rpx 40rpx 80rpx;

		.popup-header {
			display: flex;
			align-items: center;

			.title {
				font-size: 38rpx;
				font-weight: bold;
			}

			.logo {
				flex: none;
				height: 80rpx;
				width: 80rpx;
				margin-right: 20rpx;
				border-radius: 4rpx;
			}
		}

		.popup-tips {
			color: #999;
			margin-top: 40rpx;
		}

		.popup-form {
			margin-top: 55rpx;

			.select-avatar {
				width: 120rpx;
				height: 120rpx;
				color: #999;
				padding: 0;

				.avatar {
					width: 100%;
					height: 100%;
				}

				.select-btn {
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					border: 1px dotted #ccc;
					font-size: 22rpx;
					border-radius: 4rpx;
				}
			}

			.submit-btn {
				height: 82rpx;
				line-height: 82rpx;
				border-radius: 41px;
				color: #fff;
				font-size: 30rpx;
				margin: 80rpx 35rpx 60rpx;
				@include background_color();
			}

			.close-btn {
				color: #999;
				font-size: 30rpx;
				text-align: center;
			}
		}
	}
</style>